<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>


<style>
    body{
        margin: 0;
        padding: 0;
        background: url(/img/loginLibrary.jpg);

        font-family: sans-serif;
        background-size: cover;

    }
    .button {
        display: inline-block;
        border-radius: 4px;
        background-color: #f4511e;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 15px;
        padding: 6px;
        /*width: 100%;*/
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;

    }
    .button1{width: 100%;}
    .button2{width: 35%;}
    .button3{width: 35%;
           position: relative;
             left:80px;
            }

    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

    .button1 span:after {
        content: '»';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }
    .button3 span:after {
        content: '»';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .button2 span:after {
        content: '«';
        position: absolute;
        opacity: 0;
        top: 0;
        left: -20px;
        transition: 0.5s;
    }

    .button1:hover span {
        padding-right: 10px;
    }
    .button2:hover span {
        padding-left: 10px;
    }
    .button3:hover span {
        padding-right: 10px;
    }

   .button1:hover span:after {
        opacity: 1;
        right: 0;
    }
    .button2:hover span:after {
        opacity: 1;
        left: 0;
    }
    .button3:hover span:after {
        opacity: 1;
        right: 0;
    }

    .box{

        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 400px;
        padding: 40px;
        background: rgba(0,0,0,.8);
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0,0,0,.5);
        border-radius: 10px;


    }
    .codeimgbox{
        margin:0 auto;
        width:300px ;
        height: 55px;
        position: relative;
        left: 70px;
    }
    .codeimg{
        width: 160px;
        height: 55px;
    }
    .box h2{
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
    }
    .box .inputBox {
        position: relative;
    }
    .box .inputBox input{
        width: 100%;
        text-align: center;
        padding: 10px 0;
        font-size: 18px;
        color: #ffffff;
        margin-bottom: 10px;
        border-bottom: 1px solid #fff;
        outline: none;
        background: transparent;

    }
    .box .inputBox label{
        position: absolute;
        top:0;
        left: 0;
        text-align: center;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: .5s;
    }
    .box .inputBox input:focus ~ label,
    .box .inputBox input:valid ~label{
        top:-18px;
        left: 15px;
        color: #03a9f4;
        font-size: 15px;
    }
    .huanyizhang:hover{
        color: #f4511e;

    }
    /*.box a{*/
    /*    background: transparent;*/
    /*    border: none;*/
    /*    outline: none;*/
    /*    color: #f4511e;*/
    /*    padding: 10px 20px;*/
    /*    border-radius: 5px;*/
    /*    cursor: pointer;*/
    /*    top: 50%;*/
    /*    left: 50%;*/
    /*}*/




</style>
<body>
<div class="box">
    <h2>锦觅图书馆管理系统</h2>
    <h2>登录</h2>
<form class="formbox" th:action="@{login}" method="POST">

    <div class="inputBox">
    <input type="text" name="userName" id="userName" placeholder="请输入用户名/手机号"/>
    </div>

    <div class="inputBox">
       <input type="password" name="password" id="password" placeholder="请输入密码">
    </div>

   <div class="codeimgbox">
       <img src="/verifycode" onclick="this.src=this.src+'?'+Math.random()" id="img">
       <a class="huanyizhang" href="#" onclick="document.getElementById('img').onclick()">换一张?</a><br/>
<!--    <img id ="verifycode" class="codeimg" src="/verifycode"  onclick=" " >&lt;!&ndash;    验证码图片&ndash;&gt;-->
   </div>


    <div class="inputBox" align="center">
        <input type="text" name="code" id="code" placeholder="请输入验证码">


    </div>

    <button class="button button1" style="vertical-align:middle"  type="submit" onclick="return ischeckemail()" ><span>登录</span></button>
</form>
    <a  th:href="@{loginByEmail}"><button class="button1 button" type="button"><span>邮箱验证码登录</span></button></a>

    <a  th:href="@{registUser}"><button class="button2 button" type="button"><span>注册</span></button></a>
    <a th:href="@{verifyEmailCode}"><button class="button3 button" type="button"><span>找回密码</span></button></a>

</div>
</body>
<script type="text/javascript">
    function ischeckemail(){

        var nullName = document.getElementById("userName").value;
        var nullName1 = document.getElementById("password").value;
        var nullName3=document.getElementById("code").value;
        if(nullName==""){
            alert("用户名不能为空，请重新输入！");
            document.getElementById("userName").focus();
            return false;
        }

        if(nullName1==""){
            alert("密码不能为空，请重新输入！");
            document.getElementById("password").focus();
            return false;
        }
        if(nullName3==""){
            alert("验证码不能为空，请重新输入！");
            document.getElementById("code").focus();
            return false;
        }

        ;
    }


</script>
</html>